<template>
  <div class="app-root" :class="themeClass">
    <div class="app-container">
      <v-border-image></v-border-image>
      <p>{{ msg }}</p> 
      <select v-model="theme">
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
      </select>
    </div>
  </div>
</template>
<script>
import BorderImage from "@views/BorderImage.vue"
export default {
  name: 'app',
  components: {
    'v-border-image': BorderImage
  },
  data() {
    return {
      msg: 'Dynamic Themes',
      theme: 'red'
    }
  },
  computed: {
    themeClass() {
      return `theme-${this.theme}`;
    }
  }
}

</script>
<style lang="scss" scoped>
.app-container {
  @include themify() {
    color: themed('font-color');
  }
}
</style>
